<template>
  <div class="list flex-bett flex-wrap">
    <div class="box1-li">
      <div
        class="img"
        :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}"
      ></div>
      <div class="content flex">
        <div class="left">
          <div class="date-t">8-21</div>
          <div class="date-y">2020</div>
        </div>
        <div class="right">
          <div class="box1-li-title">这里是标题</div>
          <div class="box1-li-p">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
        </div>
      </div>
    </div>

    <div class="box1-li">
      <div
        class="img"
        :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}"
      ></div>
      <div class="content flex">
        <div class="left">
          <div class="date-t">8-21</div>
          <div class="date-y">2020</div>
        </div>
        <div class="right">
          <div class="box1-li-title">这里是标题</div>
          <div class="box1-li-p">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
        </div>
      </div>
    </div>

    <div class="box1-li">
      <div
        class="img"
        :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}"
      ></div>
      <div class="content flex">
        <div class="left">
          <div class="date-t">8-21</div>
          <div class="date-y">2020</div>
        </div>
        <div class="right">
          <div class="box1-li-title">这里是标题</div>
          <div class="box1-li-p">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
        </div>
      </div>
    </div>

    <div class="box1-li">
      <div
        class="img"
        :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}"
      ></div>
      <div class="content flex">
        <div class="left">
          <div class="date-t">8-21</div>
          <div class="date-y">2020</div>
        </div>
        <div class="right">
          <div class="box1-li-title">这里是标题</div>
          <div class="box1-li-p">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
        </div>
      </div>
    </div>

    <div class="box1-li">
      <div
        class="img"
        :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}"
      ></div>
      <div class="content flex">
        <div class="left">
          <div class="date-t">8-21</div>
          <div class="date-y">2020</div>
        </div>
        <div class="right">
          <div class="box1-li-title">这里是标题</div>
          <div class="box1-li-p">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
        </div>
      </div>
    </div>

    <div class="box1-li">
      <div
        class="img"
        :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}"
      ></div>
      <div class="content flex">
        <div class="left">
          <div class="date-t">8-21</div>
          <div class="date-y">2020</div>
        </div>
        <div class="right">
          <div class="box1-li-title">这里是标题</div>
          <div class="box1-li-p">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
        </div>
      </div>
    </div>
    <div class="page flex-jusa">
      <div class="a">上一页</div>
      <div class="a">1</div>
      <div class="a">2</div>
      <div class="a">3</div>
      <div class="a">4</div>
      <div class="a">5</div>
      <div class="a">最后一页</div>
      <input type="text" placeholder="页数" name="page" />
      <div class="a">GO</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "list",
  data: function () {
    return {};
  },
  created() {},
  methods: {},
};
</script>
<style scoped="scoped">
.list{
  padding: 30px 0 40px 0;
}
.list .box1-li{
  width: 387px;
  background: #FFFFFF;
  min-height: 100px;
  box-shadow: 1px 23px 53px 18px rgba(83, 108, 187, 0.05);
  margin-bottom: 20px;
}
.list .box1-li .img{
  width: 387px;
  height: 195px;
}
.list .box1-li .content{
  padding: 20px 5px 35px 5px;
  color: #343434;
  overflow: hidden;
}
.list .box1-li .content .left{
  padding:0 15px;
  border-right: 2px solid #E2E2E2;
  flex-grow:0;
  flex-shrink:0;
  
}
.list .box1-li .content .left .date-t{
  font-size: 20px;
  line-height: 30px;
}
.list .box1-li .content .left .date-y{
  font-size: 15px;
  line-height: 24px;
  padding-top: 2px;
}
.list .box1-li .content .right{
  flex: 1;
  padding-left: 10px;
  overflow: hidden;
}
.list .box1-li .content .right .box1-li-title{
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list .box1-li .content .right .box1-li-p{
  width: 100%;
  padding-top: 16px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.page{
    width: 610px;
    border-top: 2px solid #eeeeee;
    margin: auto;
    padding: 12px 0;
    text-align: center;
}
.list .page{
  margin-top: 40px;
}
.page .a{
    padding: 0 13px;
    margin: 0 4px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #666;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
}
.page input{
    width: 50px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    font-size: 14px;
    text-align: center;
}

</style>
